<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>分页插件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="./src/js/jq.min.js"></script>
  <!-- <link href="css/index.css" rel="stylesheet" /> -->
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script>
	//总页数
	var pageNum = 1;
	//当前页
	var currentPage = 1;
	//每页多少条
	var size = 10;
	//方法名
	var fangfa = "";
	function rushPage(totalCount,ff){
		pageNum = totalCount;
		pageNum = totalCount <= size ? 1 : totalCount/size; 
		pageNum = parseInt(pageNum);
		if(totalCount >= size && totalCount%size != 0){
			pageNum += 1;
		}
		fangfa = ff;
		var topPage = "";
		if(pageNum >= 1 && pageNum <=4){
			for(j =1 ;j<=pageNum ;j++){
				if(j == currentPage){
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
				}else{
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage("+j+")'>"+j+"</a>";
				}
			}
		}else if(pageNum >4){
				currentPage = parseInt(currentPage);
				var pre = currentPage-1;
				var next = currentPage+1;
				if(currentPage == 1){
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(1)'>1</a><a class='' style='cursor:pointer;' onClick='selectPage(2)'>2</a><a class='' style='cursor:pointer;' onClick='selectPage(3)'>3</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if(currentPage == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-2)+")'>"+(pageNum-2)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(pageNum-1)+")'>"+(pageNum-1)+"</a><a class='active' style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if((currentPage+1) == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else if((currentPage+2) == pageNum){
					topPage += "<a class='' style='cursor:pointer;' onClick='selectPage(1)'>1</a><em>...</em><a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}else{
					topPage += "<a class='active' style='cursor:pointer;' onClick='selectPage(currentPage)'>"+currentPage+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+1)+")'>"+(currentPage+1)+"</a><a class='' style='cursor:pointer;' onClick='selectPage("+(currentPage+2)+")'>"+(currentPage+2)+"</a><em>...</em><a style='cursor:pointer;' onClick='selectPage("+pageNum+")'>"+pageNum+"</a>";
				}
		}
		if(totalCount >= 1){
			$(".page_box,.page_box1").html("<li><a onclick='fristPage();' style='cursor:pointer;'>首页</a><span><a onclick='upNextPage()' class='pre' style='cursor:pointer;'><i></i></a>"+topPage+"<a onclick='downNextPage();' class='next' style='cursor:pointer;'><i></i></a></span><a style='cursor:pointer;' onclick='lastPage();'>尾页</a><span>跳转到 第<input type='text' id='jumpPageNum' />页 </span><a class='qd_btn' onclick='jumpPage();'>确定</a></li>");
		}else{
			$(".page_box,page_box1").html("");
		}
	}
	function upNextPage(){
		currentPage = currentPage - 1;
		if(currentPage <= 0){
			currentPage = 1;
		}
		fangfa();
	}
	function downNextPage(){
		currentPage = currentPage + 1;
		if(currentPage > pageNum){
			currentPage = pageNum;
		}		
		fangfa();
	}
	function fristPage(){
		currentPage =  1;	
		fangfa();
	}
	function lastPage(){
		currentPage =  pageNum;	
		fangfa();
	}
	function selectPage(a){
		currentPage =  a;	
		fangfa();
	}
	function jumpPage(){
		var jumpPageNum = $("#jumpPageNum").val();
		if(jumpPageNum==""){
		jumpPageNum=1;
		};
		if(jumpPageNum>pageNum){
		jumpPageNum=pageNum;
		}
		currentPage = jumpPageNum;	
		fangfa();
	}	
	$(document).on("keyup","#jumpPageNum",function(){
	//$("#jumpPageNum").live("keyup",function(){
		var rg=$(this).val();
		if(rg != ""){
			rg = checkInputIsNumber(rg);
			if(rg != ""){
				rg = parseInt(rg);
				$(this).val(rg);
			}else{
				$(this).val(rg);
			}
		}
		if(rg > pageNum){
			$(this).val(pageNum);
		}
		currentPage = $("#jumpPageNum").val();
	});	
	
	/** 验证只能输入整数 数字* */
	function checkInputIsNumber (_this) {
	    var str = $.trim(_this).split('');
	    var valValue = "";
	    for (var i = 0; i < str.length; i++) {
	        if (!isNaN(str[i]) && $.trim(str[i]).length > 0) {
	            if (i == 0 && str[i] == 0) {
	            	
	            } else {
	                valValue += str[i];
	            }
	        }
	    }
	    return valValue;
	}					
</script>
<script>
	var currentPage = 1; //默认初始分页 请求数据时候会使用到这个变量传入到你的后台查询第几页的数据
	$(document).ready(function(){
		get_Date();
	})
	function get_Date(){
		var total = 50; //这个就是你的数据总数
		alert(currentPage);
		if(total >10){
		  rushPage(50, get_Date); //get_Date 是你请求数据的方法
		}else{
		  rushPage(0, get_Date);
		}
	}
</script>
<ul class="page_box" style="margin-right: 600px;"> <!-- style="margin-right:20px;" -->
 
</ul>
<ul class="page_box1" style="margin-right: 600px;"> <!-- style="margin-right:20px;" -->
 
</ul>
<body>
</body>
</html>